<template>
	<view class="my-page">
		<u-navbar leftIconColor="#ffffff" :autoBack="true" :placeholder="true" bgColor="rgba(255,255,255,0.0)">
			<view slot="center" class="nav-title">
				<text v-if="status == 1">修改登录密码</text>
				<text v-if="status == 2">修改支付密码</text>
			</view>
		</u-navbar>
		<view class="content">
			<view class="title">注册手机号</view>
			<view class="item">
				<u--input color="#ffffff" placeholder="请输入手机号码" border="none" v-model="tel"></u--input>
			</view>
			<view class="title">验证码</view>
			<view class="item">
				<u-input color="#ffffff" placeholder="请输入验证码" v-model="code" border="none">
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
						<u-button @tap="getCode" type="success" size="mini" color="rgba(0,0,0,0.0)"
							class="custom-btn"><text class="text">{{tips}}</text></u-button>
					</template>
				</u-input>
			</view>
			<view class="title" v-if="status == 1">请设置新密码</view>
			<view class="item" v-if="status == 1">
				<u--input color="#ffffff" placeholder="请输入新登录密码" type="password" border="none" v-model="password"></u--input>
			</view>
			<view class="title" v-if="status == 2">请设置新支付密码</view>
			<view class="item" v-if="status == 2">
				<u--input color="#ffffff" placeholder="请输入新支付密码" type="number" border="none" v-model="pay_password"></u--input>
			</view>
			<view class="btn" v-if="status == 1">
				<u-button style="color:#000;" @click="goup" color="linear-gradient(255.89deg, #FFF0E3 6.94%, #D7B39A 87.16%)" size="large" shape="circle"
					type="primary" text="确认"></u-button>
			</view>
			<view class="btn" v-if="status == 2">
				<u-button style="color:#000;" @click="gopay" color="linear-gradient(255.89deg, #FFF0E3 6.94%, #D7B39A 87.16%)" size="large" shape="circle"
					type="primary" text="确认"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import CryptoJS from 'crypto-js';
	export default {
		data() {
			return {
				status: 1,
				tel: '',
				code: '',
				password: '',
				pay_password: '',
				tips: '',
			}
		},
		onLoad(option) {
			this.status = option.id
			console.log(this.status)
		},
		methods: {
			md5Encrypt(text) {
				return CryptoJS.MD5(text).toString();
			},
			goup() {
				const regex = /^(?=.*[a-zA-Z])(?=.*\d).{9,}$/;
				if (this.tel == '') {
					uni.showToast({
						title: '手机号不可为空！',
						icon: 'none'
					})
					return
				}
				if (this.code == '') {
					uni.showToast({
						title: '验证码不可为空！',
						icon: 'none'
					})
					return
				}
				if (this.password == '') {
					uni.showToast({
						title: '密码不可为空！',
						icon: 'none'
					})
					return
				}
				if (regex.test(this.password) == false) {
					uni.showToast({
						title: '密码长度必须大于8位数并且包含字母和数组！',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				let params = {
					code: this.code,
					mobile: this.tel,
					password: this.md5Encrypt(this.password)
				}
				this.$Request({
					method: 'POST',
					url: '/api/personal/changePassword',
					data: params,
					ismsg: true,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.code = ''
						this.tel = ''
						this.password = ''
					}
				})
			},
			gopay() {
				if (this.tel == '') {
					uni.showToast({
						title: '手机号不可为空！',
						icon: 'none'
					})
					return
				}
				if (this.code == '') {
					uni.showToast({
						title: '验证码不可为空！',
						icon: 'none'
					})
					return
				}
				if (this.pay_password == '') {
					uni.showToast({
						title: '支付密码不可为空！',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				let params = {
					code: this.code,
					mobile: this.tel,
					pay_pass: this.md5Encrypt(this.pay_password)
				}
				this.$Request({
					method: 'POST',
					url: '/api/personal/changePayPass',
					data: params,
					ismsg: true,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.code = ''
						this.tel = ''
						this.pay_password = ''
					}
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.tel == '') {
					uni.showToast({
						title: '手机号不可为空！',
						icon: 'none'
					})
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					let params = {
						phone: this.tel
					}
					this.$Request({
						method: 'POST',
						url: '/api/login/sendRegister',
						data: params,
						ismsg: true,
					}).then(res => {
						uni.hideLoading()
						if (res.code == 1) {
							uni.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						}
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
		}
	}
</script>

<style>
	.custom-btn {
		color: #000000 !important;
	}
	page{
		background: #000000;
	}
</style>
<style lang="scss" scoped>
	.my-page {
		height: 100vh;
		position: relative;
		background-image: url('../../../static/login/login-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 593px;
		padding: 30rpx;

		.nav-title {
			color: #ffffff;
		}

		.content {
			padding: 30rpx;
			.title{
				color: #ffffff;
				margin-bottom: 20rpx;
				font-size: 26rpx;
			}
			.item {
				background-color: #1A1A1B;
				margin-bottom: 30rpx;
				padding: 25rpx 30rpx;
				border-radius: 30rpx;
				.text {
					text-align: right;
					color: #52ECFA;
					font-size: 26rpx;
				}
			}

			.upload {
				text-align: center;
				margin-top: 10rpx;

				image {
					width: 280rpx;
					height: 280rpx;
				}
			}

			.btn {
				margin-top: 30rpx;
			}
		}
	}
</style>